<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootcamp 2011</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://microajax.googlecode.com/files/microajax.minified.js"></script>
    <script type="text/javascript" src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js"></script>

    <script type="text/javascript">
      google.maps.event.addDomListener(window, 'DOMContentLoaded', function() {
        var srcContainer = document.getElementById('src-code');
        var src = location.search ? location.search.substring(1) : 'list.js';

        microAjax(src, function(code) {
          try {
            eval(code);
            if (src != 'list.js') {
              srcContainer.innerHTML = code
                  .replace(/&/g,'&amp;')
                  .replace(/>/g,'&gt;')
                  .replace(/</g,'&lt;')
                  .replace(/"/g,'&quot;');

              prettyPrint();
            }

            if (typeof initialize != 'undefined') {
              initialize();
            }
          } catch(e) {
            window.console && console.log(e);
            srcContainer.innerHTML = '<a href="#" onclick="window.location.search=\'\'">home</a><p>' + code;
          }
        });

        var match = (window.location+'').match(/^(.*?)(0*)(\d+)([^\d]*)$/);
        if (match) {
          var next = document.createElement('button');
          next.id = 'next-code';
          next.innerHTML = 'Next &rarr;';
          next.onclick = function() {
            var newNum = 1 + Number(match[3]);
            window.location = match[1] + match[2].substring((''+newNum).length != match[3].length) + newNum + match[4];
          };
          document.body.insertBefore(next, srcContainer);
        }
      });
    </script>

    <link rel="stylesheet" href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css">
    <style>
      body {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
      }
      #map-canvas {
        width: 380px;
        height: 600px;
        padding-left: 20px;
      }
      #src-code {
        position: absolute;
        top: 0;
        left: 404px;
        right: 0;
        bottom: 0;
        border: 0;
        margin-top: 0;
        font-family: Menlo, monospace;
        font-size: 15px;
        overflow: auto;
      }
      #next-code {
        position: absolute;
        top: 0;
        right: 15px;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <pre id="src-code" class="prettyprint lang-js"></pre>
    <div id="map-canvas"></div>
  </body>
</html>

